<template>
  <view class="index">
    <!-- 轮播图 -->
    <view class="swiper">
      <u-swiper :height="260" :list="list1"></u-swiper>
    </view>
    <!-- 轮播图 -->
    <!-- 金刚区 -->
    <view class="kim">
      <view class="kimson">
        <image src="/static/index/tea.png" class="kimsonimg" />
        <view class="kimtit">自取</view>
      </view>
      <view class="kimline"></view>
      <view class="kimson">
        <image src="/static/index/takeout.png" class="kimsonimg" />
        <view class="kimtit">外卖</view>
      </view>
    </view>
    <!-- 金刚区 -->
    <!-- #ifdef H5 -->
    <view class="bodyh5"></view>
    <!-- #endif -->
    <!-- #ifdef APP -->
    <view class="bodyapp"></view>
    <!-- #endif -->
    <!-- 积分 -->
    <view class="score">
      <view class="scoreleft">
        <view class="scoretit">我的积分<text class="scorenum">{{score}}</text></view>
        <view class="scoretext">
          进入积分商城兑换亲雪券及周边好礼
          <image src="/static/index/right.png" class="scoreimg" alt="" />
        </view>
      </view>
      <view class="scoreright">
        <image class="scoreewm" src="/static/index/ewm.png" mode="widthFix" />
        <view class="scoremerr">会员码</view>
      </view>
    </view>
    <!-- 积分 -->
    <!-- 商城 -->
    <view class="store">
      <view class="storeleft">
        <view>
          <view class="storetitbox">
            <image
              src="/static/index/bag.png"
              mode="widthFix"
              class="storebag"
            />
            <view class="storetit">奈雪的茶商城</view>
          </view>
          <view class="storetext">优质茶礼盒，网红零食</view>
          <image src="/static/index/bagbg.png" class="bagbg" mode="widthFix" />
        </view>
      </view>
      <view class="storeright">
        <view class="storetop">
          <view class="give">
            <image
              src="/static/index/bagsmall.png"
              class="givebag"
              mode="widthFix"
            />
            <view class="givetit">买茶送包</view>
          </view>
        </view>
        <view class="storebot">
          <view class="give">
            <image
              src="/static/index/quan.png"
              class="givebag"
              mode="widthFix"
            />
            <view class="givetit">会员券包</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 商城 -->
    <!-- 会员新鲜事 -->
    <view class="member">
      <view class="membertop">
        <view class="memtit">会员新鲜事</view>
        <image
          src="/static/index/rightcircle.png"
          class="memright"
          mode="widthFix"
        />
      </view>
      <view class="membody">
        <view class="memson">
          <image src="/static/index/memimg.png" class="memimg" mode="widthFix" />
        </view>
      </view>
    </view>
    <!-- 会员新鲜事 -->
  </view>
</template>

<script>
import {mapState} from "vuex";
import store from "../../store";
export default {
  data() {
    return {
      list1: [
        "/static/index/swiper1.jpg",
        "/static/index/swiper2.jpg",
        "/static/index/swiper3.jpg",
      ],
    };
  },
  computed: {
    ...mapState(["score"]),
  },
};
</script>

<style lang="scss">
.index {
  width: 100%;
  box-sizing: border-box;
  background-color: #f0f8fa;
  padding-bottom: 100rpx;
  // 轮播图
  .swiper {
    width: 100%;
    position: relative;
    & u-swiper {
      width: 100%;
      height: 100%;
    }
  }
  // 轮播图
  // 金刚区
  .kim {
    width: 94%;
    height: 220rpx;
    border-radius: 16rpx;
    position: absolute;
    background-color: #fff;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: #e8edef 0rpx 0rpx 10rpx;
  }
  .kimson {
    width: 49%;
    text-align: center;
    box-sizing: border-box;
    .kimtit {
      font-weight: bold;
      color: #5c5c5d;
      font-size: 1rem;
    }
  }
  .kimsonimg {
    width: 100rpx;
    height: 100rpx;
  }
  .kimline {
    width: 2rpx;
    height: 60%;
    background-color: #eeeeee;
  }
  // 金刚区
  .bodyh5 {
    height: 140rpx;
  }
  .bodyapp {
    height: 13.2vh;
  }
  // 积分
  .score {
    width: 94%;
    margin: auto;
    aspect-ratio: 3;
    border-radius: 16rpx;
    background-color: #fff;
    box-shadow: #e8edef 0rpx 0rpx 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0rpx 20rpx;
    box-sizing: border-box;
    .scoreleft {
      font-size: 0.7rem;
      .scoretit {
        margin-bottom: 10rpx;
        .scorenum {
          font-size: 1rem;
          font-weight: bold;
          margin-left: 10rpx;
        }
      }
      .scoretext {
        display: flex;
        .scoreimg {
          width: 26rpx;
          height: 30rpx;
        }
      }
    }
    .scoreright {
      text-align: center;
      .scoreewm {
        width: 60rpx;
        height: 60rpx;
      }
      .scoremerr {
        color: #abb90f;
      }
    }
  }
  // 积分
  // 商城
  .store {
    width: 94%;
    margin: auto;
    margin-top: 24rpx;
    aspect-ratio: 2.1;
    border-radius: 16rpx;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .storeleft {
      width: 49%;
      height: 100%;
      background-color: #f2f2e6;
      position: relative;
      padding: 20rpx;
      box-sizing: border-box;
      .storetitbox {
        display: flex;
        align-items: center;
        margin-top: 10rpx;
        .storebag {
          width: 40rpx;
          height: 40rpx;
        }
        .storetit {
          font-size: 0.8rem;
          font-weight: bold;
          margin-left: 10rpx;
        }
      }
      .storetext {
        font-size: 0.7rem;
        color: #5c5c5d;
        margin-top: 20rpx;
        margin-left: 30rpx;
      }
      .bagbg {
        width: 220rpx;
        height: 220rpx;
        position: absolute;
        bottom: 0;
        right: 40rpx;
      }
    }
    .storeright {
      width: 49%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 0.8rem;
      .storetop {
        width: 100%;
        height: 48%;
        background-color: #fdf3f2;
        display: flex;
        align-items: center;
        color: #777576;
      }
      .give {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 20rpx;
        .givebag {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }
      }
      .storebot {
        width: 100%;
        height: 48%;
        display: flex;
        align-items: center;
        color: #777576;
        background-color: #fcf6d4;
      }
    }
  }
  // 商城
  // 会员新鲜事
  .member {
    width: 94%;
    margin: auto;
    margin-top: 24rpx;
    .membertop {
      width: 94%;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .memtit {
        font-size: 1.1rem;
        font-weight: bold;
      }
      .memright {
        width: 40rpx;
        height: 40rpx;
      }
    }
    .membody{
      width: 100%;
      .memson{
        width: 100%;
        height: 250rpx;
        background-color: #fff;
        border-radius: 16rpx;
        margin-top: 20rpx;
        box-shadow: #e8edef 0rpx 0rpx 10rpx;
        .memimg{
          width: 100%;
          height: 100%;
          border-radius: 16rpx;
        }
      }
    }
  }
  // 会员新鲜事
}
</style>
